<template>
  <div class="link-container">
    <div class="dem">
      <img src="/src/images/tw8.png" alt="logo图片" style="width: 100px; height: 40px; margin-right: 5px;" />     
    </div>
    <router-link to="/app/Data_Retrieval" class="sty">数据检索</router-link>
    <router-link to="/app/Analyse" class="sty">处理分析</router-link>
    <router-link to="/app/Model_Training/general" class="sty">模型训练</router-link>
    <router-link to="/app/Application_Space" class="sty">应用空间</router-link>
  </div>
  <router-view></router-view>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
  /* 最外层大的div */
.link-container {
  display: flex;
  justify-content: center;
  height: 5vh;
  margin-left: -120vh; /* 向右移动 */
}
.dem{
  display: flex;
   align-items: center; 
   margin-right: 100px;
   // margin-top: 25px;
    
}

.sty {
 // height: 8px;
  margin: 0 20px;
  //padding-top: 15px; /* 调整这里的值以移动文字 */
  font-size: 16px;
  font-weight: 800;
  color: #d6d8db;
  text-decoration: none; /* 移除下划线 */
  /* border: 1px solid rgb(217, 28, 238); */
}

.router-link-active {
  color: #4584ff; /* 点击后变蓝色 */
}
</style>
